<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <script>
// -----------------------------------------------------------------------------------------
// Called whenever is the grid scrolled
Grids.OnScroll = function (G,x,y){
if(y+10 > G.GetBodyScrollHeight()-G.GetBodyHeight() && G.AllPages){ // Adds one new root page when grid is scrolled bottom
   G.AddPage(null,"<I/><I Count='1' Expanded='0'/><I/><I/><I/><I/><I/><I/><I/><I/>"); // Here are put directly the page data, not <Grid> tag
   // The Count='1' Expanded='0' is just to demonstrate the adding new child pages
   }
if(x+10 > G.GetBodyScrollWidth(1)-G.GetBodyWidth(1)){ // Adds one new column page when grid is scrolled left
   var names = [], sec = G.ColNames.length-2;
   for(var i=0;i<5;i++) names[i] = "A"+(i+sec*5);
   G.AddColPage(names);
   }
}
// -----------------------------------------------------------------------------------------
// Creates new child page on parent expand
// The parent row must have set Expanded='0' Count'1' to be marked as row with children for server paging
Grids.OnDownloadPage = function(G,row,func){
if(!row.id) return; // Tests if the row is not page, in this example is useless, because it has sense only with server paging (Paging='3')
G.Source.Page.Row = row; // Here you must set the row to add the children to
G.AddDataFromServer("<Grid><Body><B><I/><I/><I Count='1' Expanded='0'/><I/><I Count='1' Expanded='0'/><I/><I Count='1' Expanded='0'/><I/><I/><I/></B></Body></Grid>",G.Source.Page); 
   // Here put the data with <Grid> tag
func(0);
G.Calculate(1,1); // Just recalculate the row count in formula on Toolbar
return true;
}
// -----------------------------------------------------------------------------------------
// Calculates count of variable columns
function CountColumns(G){
var cnt = 0;
for(var c in G.Cols) if(G.Cols[c].MainSec==1 && G.Cols[c].Visible) cnt++;
return cnt;
}
// -----------------------------------------------------------------------------------------
   </script>
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>5. Adding pages dynamically</h1>
   <h2>Adding new root pages and column pages on demand on client side</h2>

   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='05-Adding_pages.js'>05-Adding_pages.js</a></div>
      <div class="Main" style='width:100%; height:550px;'>
         <bdo Debug='check' Data_Url='05-Adding_pages.js'></bdo>
      </div>
   </center>

   <ul>
      <li>
         <h4>Adding root pages </h4> dynamically by API.<br />
         Must be set <b>Paging='2'</b> or '3'.<br />
         The new root page can be created and added to the end of grid by <h3>AddPage</h3> method.<br />
         You need to put the method the row data in XML, like in page response.<br />
         Remember, individual rows, not pages, can be added by <b>AddRow</b> method.<br />
      </li>
      <li>
         <h4>Adding column pages</h4> dynamically by API.<br />
         Must be set <b>ColPaging='2'</b>.<br />
         The new column page can be created and added to the right of variable columns (middle section) in grid by <h3>AddColPage</h3> method.<br />
         To this method you fill only the column names, not any any data.<br />
         Remember, individual columns, not pages, can be added by <b>AddCol</b> method.<br />
      </li>
      <li>
         To add the pages on scroll to the bottom or right, use <h3>OnScroll</h3> event.<br />
         Here you can use API methods like <b>GetBodyWidth</b>, <b>GetBodyScrollWidth</b> and <b>GetBodyHeight</b>, <b>GetBodyScrollHeight</b> to find if the grid is scrolled to the edge.
      </li>
      <li>
         Optionally you can set Cfg attribute <b>EnterMode</b> to specify behavior of Enter key, set it to <b>1</b> to behave like in Excel - enter goes cell down.
      </li>
      <li>
         <h4>Adding child pages</h4> dynamically by API<br />
         To add new child pages on row expand you need to switch to server child paging by Cfg attribute <h3>ChildPaging='3'</h3><br />
         And to all rows where you want to add children set attribute <h3>Count</h3><b>='1'</b> and <b>Expanded='0'</b>.<br />
         The new child page create in API event <h3>OnDownloadPage</h3>, here call <h3>AddDataFromServer</h3> with children data to add them.<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialPaging\s*=\s*(\d+)/), TGIndex = 16;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridPaging5", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialPaging="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>